<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #cats li {
            background: pink;
            height: 40px;
            line-height: 40px;
            position: relative;
            color: #000;
            padding: 10px;
        }

        #cats li::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 0.5px;
            /* 不存在 0.几px小数 屏幕由发光元器件组成 */
            background-color: skyblue;
            /* 变形属性 */
            transform: scaleY(.5);
            /* transform 可以实现小数的像素 */
        }
    </style>
</head>

<body>
    <ul id="cats">

    </ul>
    <script>
        const cats = [
            {
                name: 'A',
                age: 2
            },
            {
                name: 'B',
                age: 3
            },
            {
                name: 'C',
                age: 4
            },
        ]
        const uil = document.getElementById('cats');
        // for (let cat of cats) {
        //     uil.innerHTML += `
        //     <li>
        //         ${cat.name}-${cat.age}
        //     </li>`
        // }

        // 箭头函数!https://www.runoob.com/w3cnote/es6-function.html
        // 当箭头函数没有参数或者有多个参数，要用 () 括起来。
        // 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
        // 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
        // 当箭头函数要返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来
        // 注意点：没有 this、super、arguments 和 new.target 绑定。
        // 箭头函数里面如果没有 this 对象，此时的 this 是外层的 this 对象
        uil.innerHTML = cats.map((cat) => //{}
            //return 
            `
            <li>
                名字:${cat.name}--年龄:${cat.age}
            </li>
            `
        ).join('');
        //join 内容表示 将数组连起来的字符串

    </script>
</body>

</html>